<!-- 
	float方式实现瀑布流
 -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>float方式实现瀑布流</title>
</head>
<style>
	.dock-fill{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	.scroll-y{
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.r-img-waterfall{
		margin: 0 auto;
		padding: 5px;
	}
	.r-img-waterfall .section{
		float: left;
		width:50%;
	}
	.r-img-waterfall .section .cell{
		padding:2%;
		opacity: 0;
		transition: all .3s;
	}
	.r-img-waterfall .section .cell img{
		width:100%;
	}
</style>
<body>
	<div class="r-img-waterfall dock-fill scroll-y">
    	<div class="section -left"></div>
    	<div class="section -right"></div>
	</div>
</body>
<script>
	var imgDataList = [
							{imgUrl:'http://img05.tooopen.com/images/20140805/sy_68268886728.jpg', title:'0'},
							{imgUrl:'http://img.juimg.com/tuku/yulantu/130904/328512-130Z41J34638.jpg', title:'1'},
							{imgUrl:'http://img05.tooopen.com/images/20140805/sy_68194794777.jpg', title:'2'},
							{imgUrl:'http://pic.qiantucdn.com/58pic/16/71/62/22p58PICwub_1024.jpg', title:'3'},
							{imgUrl:'http://img05.tooopen.com/images/20140805/sy_68279879485.jpg', title:'4'},
							{imgUrl:'http://img.juimg.com/tuku/yulantu/130904/328512-130Z41KF652.jpg', title:'5'},
							{imgUrl:'http://img05.tooopen.com/images/20140805/sy_68279658934.jpg', title:'6'},
							{imgUrl:'http://img05.tooopen.com/images/20140805/sy_68268574237.jpg', title:'7'},
							{imgUrl:'http://img05.tooopen.com/images/20140621/sy_63747293547.jpg', title:'8'},
							{imgUrl:'http://img05.tooopen.com/images/20140805/sy_68268788134.jpg', title:'9'},

							{imgUrl:'http://k.zol-img.com.cn/dcbbs/23425/a23424161_01000.jpg', title:'hor1'},
							{imgUrl:'http://k.zol-img.com.cn/dcbbs/23425/a23424363_01000.jpg', title:'hor2'},
							{imgUrl:'http://k.zol-img.com.cn/dcbbs/23425/a23424163_01000.jpg', title:'hor3'},
							{imgUrl:'http://k.zol-img.com.cn/dcbbs/23425/a23424282_01000.jpg', title:'hor4'},
							{imgUrl:'http://k.zol-img.com.cn/dcbbs/23425/a23424154_0100000.jpg', title:'hor5'},
							{imgUrl:'http://file-sheying.sioe.cn/201202/9/229288441.jpg', title:'ver1'},
							{imgUrl:'http://file-sheying.sioe.cn/201202/9/229222065.jpg', title:'ver2'},
							{imgUrl:'http://file-sheying.sioe.cn/201202/9/22900017.jpg', title:'ver3'},
							{imgUrl:'http://file-sheying.sioe.cn/201202/9/22988569.jpg', title:'ver4'},
							{imgUrl:'http://file-sheying.sioe.cn/201202/9/229155441.jpg', title:'ver5'}
		];

	console.log(imgDataList);

	var completeNum = 0;
	var configCompleteNumPer = 0.6;  	//配置项，配置当加载出多少百分比后的图片时可以加载更多

	//并发加载所有图片
	function load(imgDataList){
		imgDataList.forEach(function (item) {
			loadImage(item.imgUrl, item.title);
		});
	}

	load(imgDataList);

	function loadImage(url, title) {
		var img = new Image();
		img.title = title;
		img.src = url;

		if (img.complete) {
			console.log("complete：" + img.title);
			insert(img);
			return;
		}
		img.onload = function () {
			img.onload = null;
			console.log("onload：" + img.title);
			//加载完毕才插入
			insert(img);
		};
		img.onerror = function () {
			console.log("error：" + img.title);
			imgCompleteCallback();
		}
	}

	//比较左右两列高度后插入较低的一行
	function insert(img) {

		var div = document.createElement("div");
		div.className = "cell";
		div.appendChild(img);
		var left = document.querySelector(".-left");
		var right = document.querySelector(".-right");
		var leftTop = left.clientHeight;
		var rightTop = right.clientHeight;

		leftTop > rightTop ? right.appendChild(div) : left.appendChild(div);

		imgCompleteCallback();

		setTimeout(function () {
			div.style.opacity = 1;
		}, 10);
	}
	
	//加载出指定百分比后的回调函数
	function imgCompleteCallback(){

		++completeNum;
		if(completeNum>Math.floor(imgDataList.length*configCompleteNumPer)){

			var container = document.querySelector(".r-img-waterfall");
			container.onscroll = function(){
				
				var sh = container.scrollHeight;
				var st = container.scrollTop;
				var ch = container.clientHeight;
				console.log(sh,st,ch,sh-st-ch);

				if(sh-st-ch<10){
					console.log("加载更多");
					load(imgDataList);
				}
			}
		}
	}
</script>
</html>